<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import qs from 'qs';
import {showFailToast, showSuccessToast} from "vant";
import UserCardList from "../components/UserCardList.vue";




const route = useRoute()

const userList = ref([]);

onMounted(async () => {
  // 上面的请求也可以这样做
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false})
    }
  })
  .then(function (response) {
    console.log('/user/search/tags success', response);
    return response?.data;
  })
  .catch(function (error) {
    console.log('/user/search/tags success', error);
    showFailToast('请求失败');
  })
  if (userListData){
    userListData.forEach(user => {
      if (user.tags){
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})

const {tags} = route.query;

const mockUser = {
  id: 12345,
  username: 'yupi',
  userAccount: '123',
  profile: '我爱学习！学习爱我！我想上班！快快上班！',
  avatarUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fb4a87154-18b6-4163-ac80-f4dc4bf58d09%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1700927777&t=9ac00d593319124f94893c1e8f90864d',
  gender: 0,
  phone: '23141212412',
  email: '41412412461@xassc.com',
  userRole: 0,
  planetCode: '1234',
  tags: ['Java', 'emo', '打工中','emo'],
  createTime: new Date(),
}

</script>

<template>
  <user-card-list :user-list="userList" />
  <van-empty v-if="!userList || userList.length < 1" description="未搜索到用户"/>
</template>

<style scoped>

</style>